<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>客户阶段管理</title>

  <link rel="stylesheet" href="./css/layui.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/manager.css">
</head>
<body>

  <div class="layui-tab layui-tab-brief client-manager" lay-filter="">
    <ul class="layui-tab-title">
      <li class="layui-this">客户属性筛选</li>
      <li>所在群聊筛选</li>
    </ul>
    <div class="layui-tab-content">
      <!-- 客户属性筛选 -->
      <div class="layui-tab-item layui-show">
        <!-- 筛选form -->
        <form class="layui-form client-filter" action="">
          <div class="layui-inline">
            <label class="layui-form-label">搜索客户：</label>
            <div class="layui-input-inline">
              <input type="text" name="price_min" placeholder="请输入要搜索客户" autocomplete="off" class="layui-input" style="padding-right: 24px;">
              <i class="layui-icon layui-icon-search" style="position: absolute;right: 5px;top: 11px;color: #999;"></i>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">企业标签：</label>
            <div class="layui-input-inline">
              <!-- <input type="text" name="price_min" placeholder="请选择标签" autocomplete="off" class="layui-input"> -->
              <div class="tags-filter" style="width: 210px;">
                <div class="tags-filter-content" style="padding-left: 10px;width: 175px;">
                  <span class="placeholder">请选择标签</span>
                  <!-- <span class="layui-badge-rim filter-tag">核心 <i class="layui-icon layui-icon-close"></i></span> -->
                </div>
                <i class="layui-icon layui-icon-down" style="color: #ccc;"></i>
              </div>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">添加时间：</label>
            <div class="layui-input-inline">
              <input type="text" class="layui-input" name="addTime" id="addTime" placeholder="开始日期 ~ 结束日期" autocomplete="off">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">添加渠道：</label>
            <div class="layui-input-inline">
              <select name="channel">
                <option value=""></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">添加渠道：</label>
            <div class="layui-input-inline">
              <select name="channel">
                <option value="">请选择性别</option>
                <option value="0">男</option>
                <option value="1">女</option>
                <option value="2">未知</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label" >流失状态
              <i class="layui-icon layui-icon-help tooltip" data-content="仅可统计员工授权微伴后的流失客户" style="font-size: 13px;"></i>
              ：</label>
            <div class="layui-input-inline">
              <select name="channel">
                <option value="">请选择流失状态</option>
                <option value="0">已流失</option>
                <option value="1">未流失</option>
              </select>
            </div>
          </div>

          <div class="layui-inline">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
              <button class="layui-btn layui-btn-normal" lay-submit lay-filter="">查询</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>

        </form>
        <!-- table -->
        <div class="client-container">
          <div class="flex align-items-center" style="padding: 20px 30px;">
            <div class="flex-1">
              <strong>共2个客户</strong>
              <span class="layui-breadcrumb" lay-separator="|" style="margin-left: 20px;">
                <a href="javascript:;" style="cursor: text;color: #333 !important ;">已选择<span class="client-selected-num">0</span>个客户</a>
                <a href="javascript:;" onclick="location.reload()"><i class="layui-icon layui-icon-refresh" style="font-size: 12px;"></i><small>更新数据</small></a>
              </span>
            </div>
            <div>
              <button type="button" class="layui-btn layui-btn-normal batch-score">批量添加评分</button>
              <button type="button" class="layui-btn layui-btn-normal batch-tag">批量打标签</button>
              <button type="button" class="layui-btn">下载Excel</button>
            </div>
          </div>
          <div class="mcheckbox-table">
            <table class="layui-table" lay-data="{}" lay-filter="clientTable" lay-skin="line">
              <thead>
                <tr>
                  <th lay-data="{checkbox:true}"></th>
                  <th lay-data="{field:'client'}">全部客户</th>
                  <th lay-data="{field:'service'}">所属客服</th>
                  <th lay-data="{field:'score'}">客户评分</th>
                  <th lay-data="{field:'tag'}">标签</th>
                  <th lay-data="{field:'status'}">客户状态</th>
                  <th lay-data="{field:'time'}">添加时间</th>
                  <th lay-data="{field:'contactTime'}">上次对话时间</th>
                  <th lay-data="{field:'channel'}">添加渠道</th>
                  <th lay-data="{field:'operate'}">操作</th>
                </tr> 
              </thead>
              <tbody>
                <tr>
                  <td></td>
                  <td>
                    <div class="flex lm-table-user">
                      <img src="https://wx.qlogo.cn/mmhead/2hnvQgcmtJCZkny1ibV4MQwGC6PtXU2bHrQSzJJLo57U/64" alt="">
                      <div class="flex-1">
                        <p>宠辱不惊</p>
                        <p style="color: #5ec75d;">@微信</p>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="service-card">
                      <i class="layui-icon layui-icon-friends"></i>李某
                    </div>
                  </td>
                  <td>
                    <span class="lm-table-score">
                      <img src="./img/coin.png" alt="">
                      <span>0</span>
                    </span>
                  </td>
                  <td>
                    <span class="layui-badge-rim lm-table-tag">重要</span>
                    <span class="layui-badge-rim lm-table-tag">核心</span>
                    <span class="layui-badge-rim lm-table-tag">123</span>
                  </td>
                  <td>意向客户</td>
                  <td>2020-07-18 15:06</td>
                  <td>2020-07-18 15:06</td>
                  <td>-</td>
                  <td>
                    <a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs">详情</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="layui-tab-item">内容2</div>
    </div>
  </div>

  <!-- 评分 -->
  <div id="batchScorePanel" style="display: none;" class="score-panel">
    <div class="flex align-items-center panel-tip">
      <span style="margin-left: 10px;">将给满足条件的客户批量添加评分</span>
    </div>
    <div style="margin: 10px 0;color: #666;">将给客户添加评分，此次添加
      <input type="text" name="score" value="1" required  lay-verify="required" placeholder="分数" autocomplete="off" class="layui-input" style="display: inline-block;width: 50px;">
      <span>分</span>
    </div>
    <div>
      <textarea name="remark" placeholder="请输入添加评分备注" class="layui-textarea"></textarea>
    </div>
    <div style="text-align: right;margin: 20px auto 0;">
      <button onclick="layer.close(layer.index)" class="layui-btn layui-btn-primary">取消</button>
      <button class="layui-btn layui-btn-normal">确定</button>
    </div>
  </div>
  <!-- 打标签 -->
  <div id="batchTagPanel" style="display: none;">
    <div style="padding: 30px;">
      <div class="flex align-items-center panel-tip" style="margin-bottom: 20px;">
        <span style="margin-left: 10px;">将给选择的客户批量打标签，请选择标签</span>
      </div>
      <p class="tags-panel-title">客户等级</p>
      <div class="flex tags-panel-wrap">
        <span class="tags-panel-item">核心1</span>
        <span class="tags-panel-item">核心2</span>
      </div>
      <p class="tags-panel-title">123456</p>
      <div class="flex tags-panel-wrap">
        <span class="tags-panel-item">核心3</span>
        <span class="tags-panel-item">核心核心核心核心核心核心核心核心核心核心核心核心核心核心核心4</span>
        <span class="tags-panel-item disabled">核心5</span>
        <span class="tags-panel-item">核心6</span>
        <span class="tags-panel-item">核心7</span>
      </div>
      <div style="text-align: right;margin: 20px auto 0;">
        <button onclick="layer.close(layer.index)" class="layui-btn layui-btn-primary">取消</button>
        <button class="layui-btn layui-btn-normal">确定</button>
      </div>
    </div>
  </div>
  <!-- 筛选标签 -->
  <div id="tagsPanel" style="display: none;padding: 20px;">
    <p class="tags-panel-title">客户等级</p>
    <div class="flex tags-panel-wrap">
      <span class="tags-panel-item">核心1</span>
      <span class="tags-panel-item">核心2</span>
    </div>
    <p class="tags-panel-title">123456</p>
    <div class="flex tags-panel-wrap">
      <span class="tags-panel-item on">核心3</span>
      <span class="tags-panel-item">核心核心核心核心核心核心核心核心核心核心核心核心核心核心核心4</span>
      <span class="tags-panel-item disabled">核心5</span>
      <span class="tags-panel-item">核心6</span>
      <span class="tags-panel-item">核心7</span>
    </div>
    <div style="text-align: center;margin: 20px auto 10px;">
      <button class="layui-btn layui-btn-primary layui-btn-sm tags-panel-clear" style="width: 80px;">清空</button>
      <button class="layui-btn layui-btn-normal layui-btn-sm tags-panel-confirm" style="width: 80px;">确定</button>
    </div>
  </div>

  <script src="./js/jquery.min.js"></script>
  <script src="./js/layui.all.js"></script>
  <script src="./js/common.js"></script>
  <script>
    var selectedClients = {}

    layui.use('table', function(){
      var table = layui.table;
      
      table.on('checkbox(clientTable)', function(obj){
        console.log(obj.checked); //当前是否选中状态
        console.log(obj.data); //选中行的相关数据
        // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one

        if (obj.checked) {
          // selectedClients[obj.data.用户id] = obj.data
          selectedClients['1'] = obj.data
        } else {
          // delete selectedClients[obj.data.用户id]
          delete selectedClients['1']
        }
      })
    })

    $('.batch-score').on('click', function() {
      if (!Object.keys(selectedClients).length) {
        layer.msg('请先选择客户')
      } else {
        layer.open({
          title: ['添加评分', 'font-weight:bold;'],
          type: 1,
          area: '600px',
          shadeClose: true,
          content: $('#batchScorePanel')
        })
      }
    })

    $('.batch-tag').on('click', function() {
      if (!Object.keys(selectedClients).length) {
        layer.msg('请先选择客户')
      } else {
        layer.open({
          title: ['批量打标签', 'font-weight:bold;'],
          type: 1,
          area: '600px',
          shadeClose: true,
          content: $('#batchTagPanel')
        })
      }
    })

    $(document).on('click', '.tags-panel-item', function() {
      if ($(this).hasClass('disabled')) return;
      $(this).toggleClass('on')
    })

    layui.use('laydate', function(){
      var laydate = layui.laydate;

      //日期范围
      laydate.render({ elem: '#addTime' ,range: true })
    })


    // 筛选客户标签
    $('.tags-filter').on('click', function(e) {
      if (e.target.classList.contains('layui-icon-close')) { // 删除
        var $item = $(e.target).parent()
        var value = $item.text()
        $item.remove()
        var $panelTags = $('.tags-panel-item.on')
        for (var i = 0, l = $panelTags.length; i < l; i++) {
          if ($panelTags[i].innerText === value) {
            $($panelTags[i]).removeClass('on')
          }
        }
        if (!$('.filter-tag').length) {
          $('.tags-filter-content').html('<span class="placeholder">请选择标签</span>')
        }
      } else { // 选择标签
        layer.open({
          title: ['企业标签', 'font-weight:bold;'],
          type: 1,
          shadeClose: true,
          content: $('#tagsPanel')
        })
      }
    })
    // $(document).on('click', '.tags-panel-item', function() {
    //   if ($(this).hasClass('disabled')) return;
    //   $(this).toggleClass('on')
    // })
    // 清空
    $('.tags-panel-clear').on('click', function() {
      $('.tags-panel-item').removeClass('on')
      $('.tags-filter-content').html('<span class="placeholder">请选择标签</span>')
      layer.close(layer.index)
    })
    // 确定
    $('.tags-panel-confirm').on('click', function() {
      var $tags = $('.tags-panel-item.on')
      var html = ''
      for (var i = 0, l = $tags.length; i < l; i++) {
        html += '<span class="layui-badge-rim filter-tag">' + $tags[i].innerText + '<i class="layui-icon layui-icon-close"></i></span>'
      }
      if (!html) {
        html += '<span class="placeholder">请选择标签</span>'
      }
      $('.tags-filter-content').html(html)
      layer.close(layer.index)
    })
  </script>

</body>
</html>